<script setup lang="ts">
import * as echarts from "echarts";
import {
  leftTopEcharts,
  leftCenterEcharts,
  leftBottomEcharts,
  centerBottomEcharts,
  rightTopEcharts,
} from "@/utils/echarts/visualization_fourth";
import { onMounted, ref,onBeforeUnmount } from "vue";
//echars图表
var  myChart:any = null;
onMounted(() => {
  var top_echarts:any =  document.querySelector(".countent>.left #top_echarts")
  myChart = echarts.init(top_echarts);
  leftTopEcharts(myChart);
  var  center_echarts:any = document.querySelector(".countent>.left #center_echarts")
  myChart = echarts.init(center_echarts);
  leftCenterEcharts(myChart);
  var bottom_echarts:any = document.querySelector(".countent>.left #bottom_echarts")
  myChart = echarts.init(bottom_echarts);
  leftBottomEcharts( myChart);
  var bottom_echarts:any =  document.querySelector(".countent>.center #bottom_echarts")
  myChart = echarts.init(bottom_echarts);
  centerBottomEcharts(myChart);
  var top_echarts:any =  document.querySelector(".countent>.right #top_echarts")
  myChart = echarts.init(top_echarts);
  rightTopEcharts(myChart);
});
onBeforeUnmount(()=>{
  myChart && myChart.clear();
  if (myChart != null) {
      myChart.dispose()
      myChart = null;
  }
  window.removeEventListener("resize", resize);
})
//页面改变重绘图表
var resize = ()=> myChart.resize();
window.addEventListener('resize',resize) 

var tableData:any = ref([]);
for (var i = 0; i <= 15; i++) {
  tableData.value.push({
    ranking: i + 1,
    name: "浙江XX科技有限公司",
    address: "A1幢502室",
    num: "115.30",
  });
}
</script>
<template>
  <div class="visualization_fourth">
    <div class="countent">
      <div class="left">
        <div class="item top">
          <h3>绿色能源</h3>
          <ul>
            <li>
              <img
                src="https://cdn7.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%83%BD%E6%BA%90%E6%B6%88%E8%80%97%E6%83%85%E5%86%B5/u6423.svg" />
              <div>
                <div>充电桩数量</div>
                <div><span>102</span>个</div>
              </div>
            </li>
            <li>
              <img
                src="https://cdn7.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%83%BD%E6%BA%90%E6%B6%88%E8%80%97%E6%83%85%E5%86%B5/u6423.svg" />
              <div>
                <div>光伏发电量</div>
                <div><span>102</span>kWh</div>
              </div>
            </li>
            <li>
              <img
                src="https://cdn7.axureshop.com/demo/1968221/images/%E5%9B%AD%E5%8C%BA%E8%83%BD%E6%BA%90%E6%B6%88%E8%80%97%E6%83%85%E5%86%B5/u6423.svg" />
              <div>
                <div>储能装机量</div>
                <div><span>102</span>MW</div>
              </div>
            </li>
          </ul>
          <el-row class="top_row">
            <el-col id="top_echarts"></el-col>
          </el-row>
        </div>
        <div class="item middle">
          <div class="left">
            <h3>类型</h3>
            <ul>
              <li>工业用电</li>
              <li>工业用煤</li>
              <li>员工充电</li>
              <li>日常照明</li>
              <li>设备未关</li>
              <li>光伏发电</li>
            </ul>
          </div>
          <div class="center">
            <h3>数量</h3>
            <ul>
              <li>1000</li>
              <li>950</li>
              <li>850</li>
              <li>750</li>
              <li>650</li>
              <li>600</li>
            </ul>
          </div>
          <div class="right">
            <h3>占比</h3>
            <el-row class="center_row">
              <el-row id="center_echarts"></el-row>
            </el-row>
          </div>
        </div>
        <div class="item bottom">
          <h3>年度碳排放量趋势</h3>
          <el-row class="bottom_row">
            <el-col id="bottom_echarts"></el-col>
          </el-row>
        </div>
      </div>
      <div class="center">
        <div class="top">
          <img src="@/assets/city.png" alt="" />
        </div>
        <div class="item bottom">
          <h3>年度碳排放量趋势</h3>
          <el-row class="bottom_row">
            <el-col id="bottom_echarts"></el-col>
          </el-row>
        </div>
      </div>
      <div class="right">
        <div class="top item">
          <el-row class="top_row">
            <el-col id="top_echarts"></el-col>
          </el-row>
        </div>
        <div class="bottom item">
          <h3>企业低碳排名</h3>
          <el-table
            :data="tableData"
            style="width: 100%; color: #fff"
            max-height="510">
            <el-table-column prop="ranking" label="排名" width="50" />
            <el-table-column prop="name" label="企业名称" />
            <el-table-column prop="address" label="企业地址" />
            <el-table-column prop="num" label="单位产值碳排放" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.visualization_fourth {
  height: 100%;
  padding: 10px;
  padding-bottom: 0;
}
.countent {
  height: 100%;
  display: flex;
  background: rgba(25, 39, 76, 1);
  color: #fff;
}
.countent .left,
.countent .right,
.countent .center {
  flex: 1;
}
.countent .right .item,
.countent .center .item,
.countent .left .item {
  background: rgba(12, 34, 55, 0.698039215686274);
  border: 1px solid rgba(121, 121, 121, 1);
  /* padding: 5px; */
}
.countent h3 {
  font-size: 16px;
  margin: 10px;
}
.countent > .left {
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.countent > .left .item {
  flex: 1;
  border-radius: 5px;
}
.countent .left .item:nth-child(2) {
  margin: 10px 0;
}
.countent .left .top {
  display: flex;
  flex-direction: column;
}
.countent .left .top ul {
  display: flex;
  justify-content: space-around;
  font-size: 12px;
  margin-bottom: 3px;
}
.countent .left .top li {
  display: flex;
  flex: 1;
  justify-content: center;
}
.countent .left .top li:nth-child(2) {
  border-left: 1px solid rgba(121, 121, 121, 1);
  border-right: 1px solid rgba(121, 121, 121, 1);
}
.countent .left .top li img {
  width: 31px;
  height: 28px;
  margin-right: 10px;
}
.countent .left .top li div :first-child {
  margin-bottom: 5px;
}
.countent .left .top .top_row {
  flex: 1;
}
.countent .left .top #top_echarts {
  height: 100%;
}
.countent .middle {
  display: flex;
  text-align: center;
  justify-content: center;
  color: rgb(185, 238, 248);
  font-size: 14px;
  box-sizing: border-box;
}
.countent .middle div {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.countent .middle > .right {
  flex: 2;
  display: flex;
  flex-direction: column;
}
.countent .middle > .right .center_row {
  flex: 1;
}
.countent .middle div > ul {
  height: 100%;
  padding-bottom: 10px;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.countent .left #center_echarts {
  height: 100%;
}

.countent .left > .bottom {
  display: flex;
  flex-direction: column;
}
.countent .left .bottom_row {
  flex: 1;
}
.countent .bottom_row #bottom_echarts {
  height: 100%;
}

.countent .center {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}
.countent .center .top {
  flex: 6;
  margin-bottom: 10px;
}
.countent .center .top img {
  width: 100%;
  height: 100%;
}
.countent .center .bottom {
  flex: 3;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
.countent .center .bottom_row {
  flex: 1;
}
.countent .center #bottom_echarts {
  height: 100%;
}

.countent > .right {
  display: flex;
  flex-direction: column;
  padding: 8px;
}
.countent > .right .item {
  border-radius: 5px;
}
.countent > .right .top {
  flex: 3;
}
.countent > .right .top .top_row,
.countent > .right .top_row #top_echarts {
  height: 100%;
}
.countent > .right .bottom {
  margin-top: 10px;
  flex: 6;
  padding: 0 10px;
}
.el-table {
  --el-table-border-color: var(--el-border-color-lighter);
  --el-table-border: 1px dashed var(--el-table-border-color);
  --el-table-border-bottom: none;
  --el-table-text-color: red;
  --el-table-header-text-color: #fff;
  --el-table-header-text-size: #fff;
  --el-table-header-bg-color: rgba(255, 255, 255, 0.1);
  --el-table-bg-color: transparent;
  --el-table-tr-bg-color: transparent;
  font-size: 12px;
}
:deep(.el-table__inner-wrapper::before) {
  background: none;
}
:deep(.el-table .cell) {
  padding: 0;
  text-align: center;
  line-height: normal;
}
:deep(
    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
  ) {
  background-color: rgba(8, 44, 97, 0.516);
}
:deep(.el-table__header) {
  margin-bottom: 12px;
  border: none;
}
</style>
